<template>
  <div class="body">

    <div class="recom">

      <!-- <form class="sentcom" method="post"> -->
        <div action="" method="post" class="sentcom" >
          <textarea name="ComContent" id="text" placeholder="请输入评论内容"  v-model="contents">></textarea>        
		      <button  @click="fasong" class="sentbtn">send</button>  
          <br>   
          <!-- <input type="text" name="User_id" v-model="userId" placeholder="用户ID" style="width:2rem"> -->
          <!-- <input type="text" name="Father_id" v-model="DFid" placeholder="被评论评论ID"> -->
        </div>
      
    </div>

    <!-- 用户帖子模块 -->
    <div class="comment">
      
            <!-- v-bind:key='定义变量名' -->
            <!-- v-on:触发方法="函数名" -->
          <div class="usercomment" v-for='item in Comment' :key='item.Cid' v-if='item.Father_id == null'>
            <div class="person">
              <div class="img" v-for='user in Userinfo' :key='user.Uid' v-if='user.Uid == item.User_id'>
                <!-- <img src="../assets/images/1.png" alt="touxiang" class="touxiang"> -->
                <img :src="require('../static/user/'+user.Upicture)" alt="touxiang" class="touxiang">
              </div>
              <div class="name_time">
                <div class="name" v-for='user in Userinfo' :key='user.Uid' v-if='user.Uid == item.User_id'>{{user.NikeName}}</div>
                <div class="time">{{item.Comtime}}</div>
              </div>
              <div class="answer">
                <button class="btn"><router-link :to="{name:'answer',query: {id: item.Cid,uid:userId}}" class="btn1" 
                v-for='user in Userinfo' :key='user.Uid' v-if='user.Uid == item.User_id'>answer</router-link></button>
              </div>
              
            </div>
            <div class="lztext">
                <p class="comtext" > {{item.ComContent}} </p>
            </div>
          </div> 
    </div>
    <div class="float-button">
      <a href="javascript:window.scrollTo(0,0)">UP</a>
  </div>
  </div>

</template>

<script>
import axios from "axios"

export default {
    // prop:{
    //   title: String
    // },
    // data() 用来相应页面
    data(){
        userId:(localStorage.getItem("userId"))
        return{ 
          // 声明一个caseNum对象
          index:0,
          length:0,
          Comment:[],
          Userinfo: [],
          DFid:'null',	//评论对方的id
          contents:'',	//评论内容
          // userId:'',	//用户自己的id
          userId:localStorage.getItem("userId")
        }
    },
    mounted(){
        this.getList()
        console.log(this.userId);
        // console.log(this.userId);
    },
    methods:{
      fasong(){
        console.log(this.userId);
			if(this.contents==''){
				this.$message.error('请输入用户内容')
			}else if(this.userId==null||this.DFid==''){
				this.$message.error('请先登录')
			}else{
				let p = {
					ComContent:this.contents,
					User_id:this.userId,
					Father_id:this.DFid
				}
        // console.log(p)
				this.$axios.get('http://localhost:3000/api/addcomment',{params:p}).then(res=>{
					console.log(res)
					if(res.data.code==1){
						this.$message({
							type:'success',
							message:'发送成功'
						})
						this.contents = ''
						this.userId = ''
						this.DFid = ''
					}
          else{
						this.$message.error(res.mes)
					}
				})
			}
		},
		// 请求评论列表
		getList(){
			// 得到服务器中的数据
			axios.get("http://localhost:3000/api/comment")
			.then(res =>{
			    // console.log(res.data);
			    // reverse() 数据倒序
			    this.Comment = res.data.reverse();
			    console.log(this.Comment);
			}),
			axios.get("http://localhost:3000/api/userinfo")
			.then(res =>{
			    // console.log(res.data);
			    this.Userinfo = res.data;
			    console.log(this.Userinfo);
			})
		}

    }
}

</script>

<style scoped>

/* .table{
  width: 100rem;
  height: 100rem;
  background-color: aquamarine;
} */

.body {
  width: 70%;
  height: 800rem;
  margin: 2rem auto;
  /* border-radius: 10%; */
  /* background-color: pink; */
}

/* 用户发帖模块 */
.recom{
  position: relative;
  float: right;
  left: -2%;
  /* top: 0rem; */
  height: 3%;
  width: 35%;
  border-radius: 2rem;
  background-color: #ffffff;
  /* background-color: pink; */
}
.sentcom{
  height: 80%;
  width: 100%;
  margin: auto;
}
#text{
    width: 90%;
    height: 95%;
    margin: 6% 0% 0% 4%;
    border-radius: 1.5rem;
    resize: none;
    outline-color: yellow;
    font-size: 1.1rem;
}
.sentbtn{
  height: 10%;
  width: 25%;
  float: right;
  /* border-color: #0e151c; */
  margin: 3%;
  margin-right: 6%;
  background-color: yellow;
  border: 0;
  border-radius: 0.4rem;
}
/* .sentbtn .btn{
  height: 11%;
  width: 25%;
  border: 0rem;
  margin: -5% 15% 40% 0%;
  border-radius: 0.6rem;
  font-size: 1.1rem;
  text-decoration:none;
  background-color: yellow;
} */

/* 用户贴子模块 */
.comment{
  width: 60%;
  height: 200%;
  border-radius: 0.5rem;
  background-color: #ffffff;
  /* background-color: pink; */
}
.usercomment{
  height: 1%;
  width: 100%;
  border-bottom:black solid 0.001rem;
  border-radius: 3%;
  /* background-color: pink; */
}
.lztext{
  height: 59%;
  width: 90%;
  margin: 0rem auto;
  /* background-color: black; */
}
/* 帖子内容 */
.comtext{
  width: 95%;
  height: 90%;
  margin: 0rem auto;
  font-size: 0.8rem;
  /* background-color: pink; */
  overflow: hidden;
  color: #969a9d;
}
/* 个人导航栏 */
.person{
  width: 95%;
  height: 40%;
  display: flex;
  flex-direction: row;
  /* 上 右 下 左 */
  /* padding: 7rem 0rem 1rem 3rem; */
  /* margin: 2% 2%; */
  /* background-color: pink; */
}
.img{
  width: 20%;
  height: 63%;
  /* margin: 50%; */
  margin-top: 5%;
  margin-left: 5%;
  /* padding: 10%; */
  /* background-color: antiquewhite; */
}
.touxiang{
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  /* margin: 50%;
  margin-top: 47%;
  margin-left: 70%;
  padding: 10%; */
  background-color: antiquewhite;
  /* float: left; */
}
.name_time{
  margin-left: 1%;
  width: 100%;
  height: 100%;
  /* background-color: antiquewhite; */
}
.name{
  width: 50%;
  margin-top: 15%;
  /* margin-left: 1%; */
  /* margin: 8% 12%; */
  font-size: 1.2rem;
  /* color: #0e151c; */
}
.time{
  width: 100%;
  margin-top: 4%;
  font-size: 0.2rem;
  /* margin-left: 1%; */
  /* margin: 8% 12%; */
}

.answer{
  height: 100%;
  width: 100%;
  /* margin-left: 30%;
  margin-top: 8.1%; */
}
.answer .btn{
  height: 31%;
  width: 40%;
  background-color: yellow;
  font-size: 1rem;
  margin-left: 45%;
  margin-top: 15%;
  border: 0rem;
  border-radius: 0.5rem;
}
.answer .btn1{
   text-decoration:none;
}
.float-button {
        position: fixed;
        /* height: 10%; */
        width: 5%;
        bottom: 0px;
        right: 0px;
        border-radius: 50px;
        line-height: 450%;
        text-align: center;
        background: #f7f31045;
        z-index: 1;
    }
    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }
@media screen and (max-width:768px){
    /* 手机屏幕 */
    .body{
      width: 100%;
      /* background-color: red; */
      margin: 0.1rem auto;
    }
    .person{
      /* background-color: pink; */
      width:90%;
      height: 29%;
    }
    .name_time{
      padding-left: 1%;
      /* background-color: bisque; */
    }
    .name{
      font-size: 1rem;
    }
    .time{
      font-size: 0.4rem;
      margin-top: 1%;
    }
    .img{
      width: 30%;
      /* background-color: red; */
    }
    .touxiang{
      width: 3rem;
      height: 3rem;
    }
    .lztext{
      height: 70%;
    }
    .comtext{
      height: 100%;
      font-size: 0.39rem;
      /* background-color: aquamarine; */
    }
    .answer .btn{
      height: 30%;
      width:90%;
      /* background-color: yellow; */
      margin-top: 20%;
      margin-left: 15%;
      font-size: 1rem;
      border: 0rem;
      border-radius: 0.5rem;
    }
    
    /* fatie */
    .recom{
      left: -0%;
      /* top: 0rem; */
      height: 2%;
      width: 40%;
      border-radius: 2rem;
      background-color: #ffffff;
      /* background-color: pink; */
    }
    .sentcom{
      height: 80%;
      width: 100%;
      margin: auto;
    }
    #text{
      font-size: 0.51rem;
    }
    .sentbtn{
      height: 13%;
      width: 25%;
      font-size: 0.5rem;
      /* border-color: #0e151c; */
      margin: 1%;
      margin-right: 6%;
      background-color: yellow;
      border: 0;
      border-radius: 0.4rem;
    }
    .float-button{
       zoom:0.8;
       
   }
}

@media screen and (max-width:992px) and (min-width:768px){
    /* 平板 */
      .body{
        width: 100%;
        margin: 0;
        border-top: 0.1rem yellow solid;
        /* background-color: red; */
      }
      .float-button{
       zoom:0.8;
       
   }
}

</style>